<template>
    <div>
      <h3>成绩等级 --- {{ score }}</h3>
      <div v-if="score>=90">优秀</div>
      <div v-else-if="score>=80">良好</div>
      <div v-else-if="score>=60">及格</div>
      <div v-else>不及格</div>
  
      <h3>v-show演示</h3>
      <div v-show="score>=90">优秀</div>
      <!-- <div v-show="score>=80">良好</div> -->
    </div>
  </template>
  <script setup>
  import { ref } from 'vue'
  // 条件渲染 根据不同的成绩在页面中渲染出等级
  
  let score = ref(80)
  
  // v-if else-if else 会动态的创建或销毁元素
  
  </script>
  <style scoped>
  </style>